<template>
	<view class="page-bg">
		<u-navbar autoBack :border="false" :placeholder="true">
			<view slot="center" class="fb c3 f16">
				结算订单
			</view>
		</u-navbar>
		<u-sticky bgColor="#fff" :offset-top="offsetTop" customNavHeight="44">
			<u-tabs :list="navList" :current="currentIndex" style="width: 100%;" lineColor="#1AC388"
				@change="tabsChange"
				:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"></u-tabs>
		</u-sticky>
		<swiper :current="currentIndex" :style="{height:swiperContentHeight}" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
					@scrolltoupper="onrefresh" @scrolltolower="onreachBottom">
					<view v-for="item,index in  tabItem.orderList" :key="index">
						<view class="order-item p10 mt10">
							<view class="f-s-b">
								<view class="c3 fb f16">{{item.orderNo}}</view>
								<view class="cr">{{status[item.status]}}</view>
							</view>
							<view class="divider-line mt10 mb10" />

							<view class="f14 c6 mt10">

								<view class="f">
									<view>
										废品重量：
									</view>
									<view class="ml5">
										{{Number(item.weightTal).toFixed(2)}} kg
									</view>
								</view>
								<view class="f">
									<view>
										结算金额：
									</view>
									<view class="ml5">
										¥ {{item.amountTal}}
									</view>
								</view>
								<view class="f">
									<view>
										创建时间：
									</view>
									<view class="ml5">
										{{item.createTime}}
									</view>
								</view>
								<view class="f">
									<view>
										支付类型：
									</view>
									<view class="ml5">
										{{item.payType | payTypeTxt }}
									</view>
								</view>
								<view class="f">
									<view>
										订单类型：
									</view>
									<view class="ml5">
										{{item.linkType==0?'预约结算':'一键回收'}}
									</view>
								</view>

							</view>
							<view class="divider-line mt10" />

							<view class="f m10 " style="justify-content: flex-end;">
								<view class="unConfirm-bg"
									@click="orderSettle(item)">
									查看详情
								</view>
							</view>
						</view>
					</view>

					<view class="f-f-c-c" v-show="tabItem.orderList.length==0">
						<image src="../../static/no-data.svg"></image>
						<view>暂无记录</view>
					</view>		
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup :round="10" :show="showPhone" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					{{phone}}
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="showPhone=false">
						取消
					</view>
					<view class="cm" @click="callPhone()">
						拨号
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :round="10" :show="cancel" mode="center" @close="close">
			<view class="phone-bg">
				<view class="fb c3 f18 f-f-c-c mt20">
					是否取消当前订单
				</view>
				<view class="f-s-b mt20">
					<view class="c3" @click="cancel=false">
						取消
					</view>
					<view class="cm" @click="handleOrder('3')">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const initData = [{
			state: -1,
			name: '全部',
			loadingType: true,
			pageNo: 1,
			orderList: []
		},
		{
			state: 0,
			name: '待确认',
			loadingType: true,
			pageNo: 1,
			orderList: []
		},
		{
			state: 1,
			name: '待支付',
			loadingType: true,
			pageNo: 1,
			orderList: []
		},
		{
			state: 2,
			name: '用户取消',
			loadingType: true,
			pageNo: 1,
			orderList: []
		}, {
			state: 3,
			name: '支付待确认',
			loadingType: true,
			pageNo: 1,
			orderList: []
		},
		{
			state: 4,
			name: '结算成功',
			loadingType: true,
			pageNo: 1,
			orderList: []
		},
		{
			state: 5,
			name: '支付失败',
			loadingType: true,
			pageNo: 1,
			orderList: []
		},
		{
			state: 6,
			name: '结算失败',
			loadingType: true,
			pageNo: 1,
			orderList: []
		}
	]
	export default {
		components: {},
		data() {
			return {
				showPhone: false,
				cancel: false,
				longitude: 117.2724638,
				latitude: 31.8866030,
				height: '900px',
				currentIndex: 0,
				offsetTop: '0px',
				// 0待确认，1待支付，2用户取消，3支付待确认，4结算成功，5支付失败,6结算失败
				status: ['待确认', '待支付', '用户取消', '支付待确认', '结算成功', '支付失败', '结算失败'],
				params: {
					pageNum: 1,
					pageSize: 10,
					status: '4',
				},
				currentOrder: null,
				phone: '',
				scrollerHeight: 0,
				swiperContentHeight: 0,
				scrollTop: 9999,
				ismore: true,
				navList: JSON.parse(JSON.stringify(initData)),
			}

		},
		beforeDestroy() {
			uni.setStorage({
				key: 'currentPage',
				data: 0
			})
		},
		onLoad() {
			let currentPage = uni.getStorageSync("currentPage")
			if (currentPage) {
				this.currentIndex = Number(currentPage)
			}
			let system = uni.getSystemInfoSync()
			this.offsetTop = (system.statusBarHeight) + 'px'
		},
		onShow() {
			this.getScollHeight()
			this.navList = JSON.parse(JSON.stringify(initData))
			this.loadData()
		},
		methods: {
			// 设置scoll高度
			getScollHeight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						let windowHeight = res.windowHeight;
						that.swiperContentHeight = (windowHeight - 100) + 'px';
						that.scrollerHeight = (windowHeight - 120 - 5) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					}
				});
			},
			loadData() {
				const that = this
				//这里是将订单挂载到tab列表下
				let index = that.currentIndex;
				let navItem = that.navList[index];
				let state = navItem.state;

				if (!navItem.loadingType) {
					this.$api.msg('没有更多')
					return
				}
				navItem.loadingType = 'loading';
				console.log(navItem.pageNo, 'navItem.pageNo')
				let params = {
					pageNum: navItem.pageNo,
					pageSize: 10,
					status: navItem.state
				}
				that.request("get", "riderAppOrder/app/getSettlementOrderPageList", uni.getStorageSync('token'), params)
					.then(
						res => {
							if (res.code === 200) {
								if (res.rows.length < 10) {
									navItem.loadingType = false
								} else {
									navItem.loadingType = true
								}
								if (navItem.pageNo == 1) {
									that.navList[index].orderList = res.rows
								} else {
									that.navList[index].orderList = [...that.navList[index].orderList, ...res.rows]
								}
								//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
								that.$set(navItem, 'loaded', true);
							}
						})

			},
			goMap1(item) { //
				uni.openLocation({
					latitude: Number(item.latitude), //维度
					longitude: Number(item.longitude), //经度
					scale: 18, //缩放比例，范围5~18，默认为18
					name: item.province + item.city + item.county, //地址名称
					address: item.address //地址详情
				})
			},
			close() {
				this.showPhone = false
				this.cancel = false
			},
			showCancel(item) {
				this.currentOrder = item
				this.cancel = true
			},
			showPhoneNumber(item) {
				this.phone = item.phone
				this.showPhone = true

			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				})
			},
			changeTab(e) {
				this.currentIndex = e.target.current;
				let navItem = this.navList[this.currentIndex];
				navItem.pageNo = 1
				this.navList[this.currentIndex] = navItem
				this.loadData();
			},
			tabsChange(value) {
				this.currentIndex = value.index
				let navItem = this.navList[this.currentIndex];
				navItem.pageNo = 1
				this.navList[this.currentIndex] = navItem
				this.loadData();
			},
			onrefresh() {
				let navItem = this.navList[this.currentIndex];
				navItem.pageNo = 1
				navItem.loadingType = true
				this.navList[this.currentIndex] = navItem
				this.loadData()
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				let navItem = this.navList[this.currentIndex];
				if (navItem.loadingType) {
					navItem.pageNo = navItem.pageNo + 1
					this.navList[this.currentIndex] = navItem
					this.loadData()
				}
			},
			accpetOrder(item) {
				this.currentOrder = item
				this.handleOrder('2')
			},
			handleOrder(status) {
				this.cancel = false
				uni.showLoading({

				})
				let params = {
					id: this.currentOrder.id,
					status: status
				}
				let that = this
				that.request("get", "riderAppOrder/app/dealOrder", uni.getStorageSync('token'), params).then(
					res => {
						if (res.code === 200) {
							that.requestOrder();
							uni.showToast({
								title: res.msg,
								icon: 'success',
								mask: true
							})
						}
						uni.hideLoading()
					})
			},
			navToView(url) {
				uni.navigateTo({
					url: url
				})
			},
			orderSettle(item) {
				console.log(item, 'item')
				// this.navToView('/pagesA/settlement-order/settlement-order')
				this.getSettleOrder(item.id)
			},
			getSettleOrder(id) {
				this.navToView('/pagesA/settle-list/self-settle-details?id=' + id)
				// let that = this
				// that.request("get", "riderAppOrder/app/getSettleOrderBy/" + id, uni.getStorageSync('token')).then(
				// 	res => {
				// 		console.log(res,'  rrr')
				// 		if (res.code === 200) {
				// 			if (res.data == null) {
				// 				this.navToView('/pagesA/settlement-order/settlement-order?id=' + id)
				// 			} else {
				// 				this.navToView('/pagesA/order/order-settle-details?id=' + id)
				// 			}
				// 		}
				// 		uni.hideLoading()
				// 	})
			},

		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
	}

	.current-status-icon {
		width: 10px;
		height: 10px;
		background-color: #1AC388;
		border-radius: 10px;
	}

	.status-icon {
		width: 10px;
		height: 10px;
		background-color: #999999;
		border-radius: 10px;
	}

	.navigation-bg {
		width: 65px;
		height: 26px;
		background: rgba(26, 195, 136, 0);
		border-radius: 13px 13px 13px 13px;
		opacity: 1;
		border: 1px solid #1AC388;
	}

	.confirm-bg {
		width: 90px;
		height: 34px;
		margin-left: 10px;
		background: #1AC388;
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.unConfirm-bg {
		margin-left: 10px;
		width: 90px;
		height: 34px;
		background: rgba(26, 195, 136, 0);
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #1AC388;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.phone-bg {
		width: calc(100vw - 80px);
		margin: 0 auto;
		padding: 20px;
		background: #FFFFFF;
		border-radius: 17px 17px 17px 17px;
		color: #1AC388;
	}
</style>